<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom page-header">
    <h1 class="h2">电价设置</h1>
</div>

<div class="row mb-4">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">当前电价</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6>居民用电</h6>
                        <p class="h3 mb-4"><span id="residentialPriceDisplay">0.00</span> 元/千瓦时</p>
                        <button class="btn btn-primary" onclick="openPriceModal('RESIDENTIAL')">修改价格</button>
                    </div>
                    <div class="col-md-6">
                        <h6>商业用电</h6>
                        <p class="h3 mb-4"><span id="commercialPriceDisplay">0.00</span> 元/千瓦时</p>
                        <button class="btn btn-primary" onclick="openPriceModal('COMMERCIAL')">修改价格</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">价格调整历史</h5>
            </div>
            <div class="card-body">
                <table id="priceHistoryTable" class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>生效日期</th>
                            <th>用电类型</th>
                            <th>原价格</th>
                            <th>调整后价格</th>
                            <th>操作人</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- 数据将通过JavaScript动态加载 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div> 